<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/port_company_home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>货代公司管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <!--搜索和添加区域-->
      <el-row :gutter="20">
        <el-col :span="15">
          <el-input
            placeholder="货代公司名称"
            v-model="queryInfo.goods_company_name"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="get"
            ></el-button>
          </el-input>
        </el-col>

        <!--添加按钮区-->
        <el-col :span="2">
          <el-button
            type="primary"
            @click="addDialogVisiable=true"
          >添加货代公司</el-button>
        </el-col>
        <!--删除按钮区-->
        <el-col :span="2">
          <el-button
            type="danger"
            @click="deleteDialogVisiable=true"
          >删除货代公司</el-button>
        </el-col>
      </el-row>

      <!--货代公司列表区 挂载datalist-->
      <el-table
        :data="datalist"
        border
        stripe
      >
        <!--索引-->
        <el-table-column type="index"></el-table-column>
        <!--指定数据源!-->
        <el-table-column
          label="货代公司名称"
          prop="Goods_company_name"
        >
        </el-table-column>

        <el-table-column
          label="货代公司费用"
          prop="Goods_company_charge"
        >
        </el-table-column>
      </el-table>
    </el-card>

    <!--货代公司查询区-->
    <div>货代公司查询区</div>
    <el-table
      :data="test_datalist"
      border
      stripe
    >
      <!--指定数据源!-->

      <el-table-column
        label="货代公司名称"
        prop="Goods_company_name"
      >
      </el-table-column>

      <el-table-column
        label="货代公司费用"
        prop="Goods_company_charge"
      >
      </el-table-column>

    </el-table>

    <!--按钮区域-->
    <!--添加货代公司对话框-->
    <el-dialog
      title="添加货代公司"
      :visible.sync="addDialogVisiable"
      width="50%"
      @close="addDialogClosed"
    >
      <!--新增货代公司时的显示信息主体区域-->
      <span>
				<el-form
          :model="addForm"
          :rules="addFormRules"
          width="50%"
          label-width="100px"
          ref="addFormRef"
        >
					<el-form-item
            label="货代公司名称"
            prop="goods_company_name"
          >
						<el-input v-model="addForm.goods_company_name"></el-input>
					</el-form-item>


					<el-form-item
            label="货代公司费用"
            prop="goods_company_charge"
          >
						<el-input v-model="addForm.goods_company_charge"></el-input>
					</el-form-item>
				</el-form>
			</span>
      <!--底部区域-->
      <span
        slot="footer"
        class="dialog-footer"
      >
				<el-button @click="addDialogVisiable = false">取消</el-button>
				<el-button
          type="primary"
          @click="add"
        >确定</el-button>
			</span>
    </el-dialog>

    <!--删除货代公司对话框-->
    <el-dialog
      title="删除货代公司"
      :visible.sync="deleteDialogVisiable"
      width="50%"
      @close="deleteDialogClosed"
    >
      <!--删除货代公司时的显示信息主体区域-->
      <span>
				<el-form
          :model="deleteForm"
          :rules="deleteFormRules"
          width="50%"
          label-width="80px"
          ref="deleteFormRef"
        >
					<el-form-item
            label="货代公司名称"
            prop="goods_company_name"
          >
						<el-input v-model="deleteForm.goods_company_name"></el-input>
					</el-form-item>
				</el-form>
			</span>
      <!--底部区域-->
      <span
        slot="footer"
        class="dialog-footer"
      >
				<el-button @click="deleteDialogVisiable = false">取消</el-button>
				<el-button
          type="primary"
          @click="delete1"
        >确定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
export default{
  data(){
    return{
      queryInfo:{
        goods_company_name:'',
      },
      datalist:[], //这里存放后端发送的数据
      test_datalist:[],//存放要查询的的信息

      //对话框
      addDialogVisiable:false,	//添加对话框
      deleteDialogVisiable:false,	//删除对话框

      //添加的数据
      addForm:{
        goods_company_name: "",
        goods_company_charge: "",
      },
      //删除的数据
      deleteForm:{
        goods_company_name:"",
      },

      //添加的验证规则对象
      addFormRules:{
        goods_company_name:[
          {required:true,message:"请输入货代公司名称",trigger:"blur"},
        ],
        goods_company_charge:[
          {required:true,message:"请输入货代公司费用",trigger:"blur"},
        ],
      },

      //删除的验证规则对象
      deleteFormRules:{
        goods_company_name:[
          {required:true,message:"请输入货代公司名称",trigger:"blur"},
        ],
      },

    }
  },
  created(){
    this.show()
  },
  methods:{
    async show(){
      const {data:res} = await this.$http.post('show_goods_company',{
        params: this.queryInfo
      })
      console.log(res)
      console.log(this.queryInfo.goods_company_name)
      this.datalist = res.goods_company
      console.log(this.datalist)
    },

    async get(){ //点击按钮，获取某一商品的信息
      console.log(this.queryInfo.port_company_name)
      const {data:res} =await this.$http.post('get_goods_company',this.queryInfo) //向后端发送查询请求
      console.log(res)
      this.test_datalist = res.goods_company
      console.log(this.test_datalist)
      this.$message.success("查询成功")
    },

    //监听添加货代公司对话框的关闭事件
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },

    //监听删除货代公司对话框的关闭事件
    deleteDialogClosed(){
      this.$refs.deleteFormRef.resetFields()
    },


    //点击按钮，新增商品
    add(){
      this.$refs.addFormRef.validate( async valid => {

        if (!valid) return
        //验证通过 可以添加
        const {data:res} = await this.$http.post("add_goods_company", this.addForm)
        console.log(res)

        if(res.code == "200"){
          this.$message.success("添加成功！")
        }else{
          this.$message.error("添加失败！")
        }

        //隐藏添加的对话框
        this.addDialogVisiable = false
        //刷新列表，重新获得后端数据库中数据
        this.show()
      })
    },

    //点击按钮，删除
    delete1(){
      this.$refs.deleteFormRef.validate( async valid => {
        if (!valid) return
        //验证通过 可以删除
        const {data:res} = await this.$http.post("delete_goods_company", this.deleteForm)
        console.log(res)

        if(res.code == "200"){
          this.$message.success("删除成功！")
        }else{
          this.$message.error("删除失败！")
        }

        //隐藏删除的对话框
        this.deleteDialogVisiable = false
        //刷新列表，重新获得后端数据库中数据
        this.show()
      })
    },
  }
}
</script>
<style scoped>
</style>

